
<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-row>
                      <!-- 菜单编码 -->
                      <el-col :span="5">
                        <el-form-item :label="$t('Log.queryLabel.menuCode')"   :label-width="queryformLabelWidth">
                            <el-input v-model.trim="formQueryCondition.menuCode.val" class="queryItemStyle" clearable
                                      :placeholder="$t('Log.queryLabel.placeholderMenuCode')">
                            </el-input>
                        </el-form-item>
                      </el-col>
                      <!-- 菜单名称 -->
                      <el-col :span="5" :offset="1">
                        <el-form-item :label="$t('Log.queryLabel.menuName')"   :label-width="queryformLabelWidth">
                            <el-input v-model.trim="formQueryCondition.menuName.val" class="queryItemStyle" clearable
                                      :placeholder="$t('Log.queryLabel.placeholderMenuName')">
                            </el-input>
                        </el-form-item>
                      </el-col>
                      <!-- 按钮编码 -->
                      <el-col :span="5" :offset="1">
                        <el-form-item :label="$t('Log.queryLabel.resourceCode')"   :label-width="queryformLabelWidth">
                            <el-input v-model="formQueryCondition.resourceCode.val" class="queryItemStyle" clearable
                                      :placeholder="$t('Log.queryLabel.placeholderResourceCode')">
                            </el-input>
                        </el-form-item>
                      </el-col>
                    <!-- 按钮名称 -->
                    <el-col :span="5" :offset="1">
                      <el-form-item :label="$t('Log.queryLabel.resourceName')"   :label-width="queryformLabelWidth">
                        <el-input v-model="formQueryCondition.resourceName.val" class="queryItemStyle" clearable :placeholder="$t('Log.queryLabel.placeholderResourceName')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                      <!-- 操作时间起 -->
                      <el-col :span="5">
                        <el-form-item :label="$t('Log.queryLabel.startTime')" :label-width="queryformLabelWidth" >
                            <el-date-picker v-model.trim="formQueryCondition.startTime.val" class="queryItemStyle"
                            format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                            clearable :placeholder="$t('queryLabel.selectOp')" type="date" >
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <!-- 至 -->
                      <el-col :span="5" :offset="1">
                        <el-form-item :label="$t('Log.queryLabel.endTime')" :label-width="queryformLabelWidth">
                          <el-date-picker v-model.trim="formQueryCondition.endTime.val" class="queryItemStyle"
                          format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                          clearable :placeholder="$t('queryLabel.selectOp')" type="date" >
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <!-- 列表上的按钮 -->
                    <el-row>
                      <el-col :span="24">
                        <div style="text-align:right">
                            <el-form-item>
                              <!-- 重置 -->
                                <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                            <!-- </el-form-item> -->
                            <!-- <el-form-item> -->
                              <!-- 导出 -->
                                <el-button v-permission="{menuCode: menuCode, resourceCode: 'exportBtnText'}" type="primary" @click="exportMaterial('exportBtnText')" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
                            <!-- </el-form-item> -->
                            <!-- <el-form-item> -->
                              <!-- 查询 -->
                                <el-button v-permission="{menuCode: menuCode, resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                            </el-form-item>
                        </div>
                      </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <!-- <el-table-column :label="$t('table.op')" fixed="left" min-width="150">
                            <template slot-scope="scope">
                                <el-button size="gv" icon="el-icon-edit" :loading="loading"
                                @click="edit(scope.$index, scope.row)"
                                            >{{ $t('btnText.editBtnText') }}</el-button>
                                <el-button size="gv" icon="el-icon-delete"
                                            type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.deleteBtnText') }}</el-button>
                                <el-button size="gv" icon="el-icon-delete"
                                            type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.logoffBtnText') }}</el-button>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="menuCode" min-width="140" fixed="left"
                                            :label="$t('Log.table.menuCode')" sortable="custom" sort-by="menuCode">
                        </el-table-column>
                        <el-table-column prop="menuName" min-width="140" fixed="left"
                                            :label="$t('Log.table.menuName')" sortable="custom" sort-by="menuName">
                        </el-table-column>
                        <el-table-column prop="resourceCode" min-width="140"
                                            :label="$t('Log.table.resourceCode')" sortable="custom" sort-by="resourceCode">
                        </el-table-column>
                        <el-table-column prop="resourceName" min-width="150"
                                            :label="$t('Log.table.resourceName')" sortable="custom" sort-by="resourceName">
                        </el-table-column>
                        <el-table-column prop="resourceDesc" min-width="350" fixed="left"
                                            :label="$t('Log.table.resourceDesc')" sortable="custom" sort-by="resourceDesc">
                        </el-table-column>

                        <!-- <el-table-column prop="status" min-width="110" sortable="custom"
                        :label="$t('Log.table.status')" sort-by="status">
                        </el-table-column> -->

                        <el-table-column :label="$t('Log.table.creator')" min-width="120" sortable="custom" prop="creator" sort-by="creator">
                        </el-table-column>
                        <el-table-column :label="$t('Log.table.createdDate')" min-width="180" sortable="custom" prop="createdDate" sort-by="createdDate">
                        </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'Log',
  props: {
    menuCode: String
  },
  data () {

    return {
        queryformLabelWidthLong:"100px",
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"com.ispr.iptv.entity.sys.SysLogEntity",
        // 查询条件
        formQueryCondition: {
            menuCode: {
              key:'menuCode',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            menuName: {
              key:'menuName',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            resourceCode: {
              key:'resourceCode',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            resourceName:{
              key:'resourceName',
              op:'LIKE',
              val:''
            },
            startTime: {
              key:'createdDate',
              group:'startTime',
              val: '', // 查询的值
              op:'>='
            },
            endTime: {
              key:'createdDate',
              group:'endTime',
              val: '', // 查询的值
              op:'<='
            },
        },

        // 排序对象
        sort: {
            key: "createdDate",
            dir: "Desc"
        },

    }
  },
  methods:{

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.menuCode.val = "";
        this.formQueryCondition.menuName.val = "";
        this.formQueryCondition.resourceName.val = "";
        this.formQueryCondition.resourceCode.val = "";
        this.formQueryCondition.startTime.val = "";
        this.formQueryCondition.endTime.val = "";
    },
    // queryTable: function() {
    //       this.loading = true;
    //       const obj = JSON.parse(JSON.stringify(this.formQueryCondition))
    //       if(obj.startTime.val){
    //         obj.startTime.val=this.dateFormate(this.formQueryCondition.startTime.val)
    //       }
    //       if(obj.endTime.val){
    //         obj.endTime.val=this.dateFormate(this.formQueryCondition.endTime.val)
    //       }
    //       this.queryModel(this.modelName,"Query",obj,this.pager,this.sort,this.setTableData)
    //   },
      // dateFormate(date){
      //   return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
      // },
    exportMaterial:function exportMaterial (rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      let param = { 'className': 'com.ispr.iptv.entity.sys.SysLogEntity', 'opKey': 'Export', 'params': this.queryObjToArray(this.formQueryCondition), 'sort': [{ 'col': 'keyId', 'order': 'desc' }], 'fileName': '调配资材' };
      let fileName = '系统日志信息' + '.xlsx';
      this.downloadByIdOrName(this, '/file/export', 'param', JSON.stringify(param), fileName);
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
    enterDown(){
      var g = this
      if(!g.loading){
        g.onQuery('queryBtnText')
      }
    }


  },
  mounted: function mounted() {
    this.onQuery('queryBtnText');
    window.setTimeout(this.initTable,100);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

